import React, { useEffect } from 'react';
import AnimatedContent from '../AnimatedContent';

export default function Index({ onCancel, className, wrapperClass, children, blur }) {
  const disableScroll = () => {
    window.addEventListener('wheel', preventScroll, { passive: false });
    window.addEventListener('touchmove', preventScroll, { passive: false });
    document.querySelector('.content-container')?.classList.add('scrollbar-hidden');
  };
  // 恢复滚动
  const enableScroll = () => {
    window.removeEventListener('wheel', preventScroll);
    window.removeEventListener('touchmove', preventScroll);
    document.querySelector('.content-container')?.classList.remove('scrollbar-hidden');
  };
  const preventScroll = e => {
    e.preventDefault();
  };

  useEffect(() => {
    disableScroll();
    return () => {
      enableScroll();
    };
  }, []);

  const handleClick = e => {
    e.stopPropagation();
  };

  return (
    <div
      className={`w-screen h-screen fixed z-[99] flex justify-center items-center bg-black/5 ${wrapperClass}`}
      onClick={onCancel}
    >
      <AnimatedContent
        distance={180}
        direction="vertical"
        reverse={true}
        config={{ tension: 80, friction: 20 }}
        initialOpacity={0.3}
        animateOpacity
        scale={1}
        threshold={0.2}
      >
        <div
          className={` min-w-[400px] min-h-[200px] rounded-md shadow-md px-3 py-4 relative z-[100] ${className} `}
          onClick={handleClick}
        >
          {children}
        </div>
      </AnimatedContent>
    </div>
  );
}
